<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 
    - primary meta tags
  -->
  <title>联系方式 - 610的书窝</title>
  <meta name="title" content="联系方式 - 610的书窝">
  <meta name="description" content="联系610书窝，与我们分享你的想法、建议或疑问">

  <!-- 
    - favicon
  -->
  <link rel="shortcut icon" href="./favicon.svg" type="image/svg+xml">

  <!-- 
    - custom css link
  -->
  <link rel="stylesheet" href="./assets/css/style.css">

  <!-- 
    - Font Awesome CDN Link (Added)
  -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css"
    integrity="sha512-SnH5WK+bZxgPHs44uWIX+LLJAJ9/2PkPKZ5QiAj6Ta86w+fsb2TkcmfRyVX3pBnMFcV7oQPJkl9QevSCWr3W6A=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />

  <!-- 
    - google font link
  -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600&family=Work+Sans:wght@400;500;700&display=swap"
    rel="stylesheet">

  <style>
    /* 联系方式页面专用样式 */
    .contact-form {
      background-color: var(--white-1);
      padding: 30px;
      border-radius: 15px;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      border: 2px solid var(--primary-pink);
    }

    .form-title {
      color: var(--dark-pink-text);
      margin-bottom: 20px;
      font-size: var(--fs-3);
      text-align: center;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-label {
      display: block;
      margin-bottom: 8px;
      color: var(--dark-pink-text);
      font-weight: var(--fw-500);
    }

    .form-input,
    .form-textarea {
      width: 100%;
      padding: 12px 15px;
      border: 1px solid var(--primary-pink);
      border-radius: 8px;
      background-color: var(--white-2);
      color: var(--dark-pink-text);
      transition: border-color 0.3s;
    }

    .form-input:focus,
    .form-textarea:focus {
      border-color: var(--secondary-pink);
      outline: none;
    }

    .form-textarea {
      resize: vertical;
      min-height: 150px;
    }

    .submit-btn {
      width: 100%;
      padding: 12px;
      background-color: var(--secondary-pink);
      color: var(--white-1);
      border: none;
      border-radius: 8px;
      font-weight: var(--fw-500);
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .submit-btn:hover {
      background-color: var(--dark-pink-text);
    }

    .contact-info-card {
      background-color: var(--soft-pink-bg);
      padding: 25px;
      border-radius: 15px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      border-left: 4px solid var(--secondary-pink);
    }

    .contact-icon {
      width: 50px;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: var(--primary-pink);
      color: var(--dark-pink-text);
      border-radius: 50%;
      margin-right: 15px;
      font-size: 20px;
    }

    .contact-details {
      flex: 1;
    }

    .contact-title {
      font-size: var(--fs-5);
      color: var(--dark-pink-text);
      margin-bottom: 5px;
    }

    .contact-text {
      color: var(--medium-gray);
    }

    .faq-item {
      margin-bottom: 20px;
      background-color: var(--white-1);
      border-radius: 10px;
      overflow: hidden;
      border: 1px solid var(--primary-pink);
    }

    .faq-question {
      padding: 15px 20px;
      background-color: var(--soft-pink-bg);
      color: var(--dark-pink-text);
      font-weight: var(--fw-500);
      cursor: pointer;
      position: relative;
    }

    .faq-question::after {
      content: "+";
      position: absolute;
      right: 20px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
    }

    .faq-answer {
      padding: 15px 20px;
      color: var(--medium-gray);
      display: none;
    }

    .faq-item.active .faq-question::after {
      content: "-";
    }

    .faq-item.active .faq-answer {
      display: block;
    }
  </style>
</head>

<body id="top">

  <!-- 
    - #HEADER
  -->
  <header class="header" data-header>
    <div class="header-top">
      <div class="container">

        <a href="index.html" class="logo">
          <img src="./assets/images/logo.svg" width="138" height="28" alt="booken home">
        </a>

        <div class="input-wrapper">
          <input type="search" name="search" placeholder="搜索我们的网站" class="input-field">

          <button class="btn btn-primary">搜索</button>
        </div>

        <div class="header-action">

          <a href="./cart.html" class="header-action-btn" aria-label="cart" title="购物车">
            <span class="span">3</span>
            <ion-icon name="bag-handle-outline" aria-hidden="true"></ion-icon>
          </a>

          <button class="nav-open-btn" aria-label="open menu" title="打开菜单" data-nav-toggler>
            <ion-icon name="menu-outline" aria-hidden="true"></ion-icon>
          </button>

          <a href="./login.html" class="header-action-btn" aria-label="user" title="登录/注册">
            <ion-icon name="person-outline" aria-hidden="true"></ion-icon>
          </a>

        </div>

      </div>
    </div>

    <div class="header-bottom" data-navbar>
      <div class="container">

        <nav class="navbar">

          <button class="nav-close-btn" data-nav-toggler aria-label="close menu" title="关闭菜单">
            <ion-icon name="close-outline" aria-hidden="true"></ion-icon>
          </button>

          <div class="navbar-top">
            <input type="search" name="search" placeholder="搜索我们的网站" class="input-field">

            <button class="search-btn" aria-label="Search">
              <ion-icon name="search-outline" aria-hidden="true"></ion-icon>
            </button>
          </div>

          <ul class="navbar-list">

            <li>
              <a href="index.html" class="navbar-link">首页</a>
            </li>

            <!-- 博客导航项 -->
            <li>
              <a href="blog.html" class="navbar-link navbar-link-cute blog-link">
                <span class="cute-icon">📚</span>
                博客
                <span class="cute-bubble">读好文~</span>
              </a>
            </li>

            <!-- 商店导航项 -->
            <li>
              <a href="shop.html" class="navbar-link navbar-link-cute shop-link">
                <span class="cute-icon">🛍️</span>
                商店
                <span class="cute-bubble">买买买~</span>
              </a>
            </li>

            <!-- 关于我们导航项 -->
            <li>
              <a href="about.html" class="navbar-link navbar-link-cute about-link">
                <span class="cute-icon">🏡</span>
                关于我们
                <span class="cute-bubble">认识我们~</span>
              </a>
            </li>

            <!-- 联系方式导航项 - 当前激活页面 -->
            <li>
              <a href="contact.html" class="navbar-link navbar-link-cute contact-link"
                style="background-color: var(--primary-pink);">
                <span class="cute-icon">✉️</span>
                联系方式
                <span class="cute-bubble">找到我们~</span>
              </a>
            </li>

          </ul>

        </nav>

        <a href="tel:+15813316885" class="header-contact-link">
          <ion-icon name="headset-outline" aria-hidden="true"></ion-icon>

          <span class="span">(+86) 15813316885</span>
        </a>

      </div>
    </div>

    <div class="overlay" data-overlay data-nav-toggler></div>
  </header>

  <main>
    <article>

      <!-- 
        - #联系方式页面标题部分
      -->
      <section class="section hero has-bg-image" aria-label="contact-hero"
        style="background-image: url('./assets/images/section-bg.jpg')">
        <div class="container">

          <div class="hero-content">

            <h1 class="h1 hero-title has-after">
              联系我们 <br>
              与书窝互动
            </h1>

            <p class="hero-text">
              有任何问题、建议或想法？请随时联系我们，我们很乐意听取你的声音～
            </p>

          </div>

        </div>
      </section>

      <!-- 
        - #联系表单与信息部分
      -->
      <section class="section">
        <div class="container">
          <div class="grid-list" style="grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;">

            <!-- 联系表单 -->
            <div class="contact-form">
              <h2 class="form-title">给我们留言</h2>

              <form action="#" method="post">
                <div class="form-group">
                  <label for="name" class="form-label">你的名字</label>
                  <input type="text" id="name" name="name" class="form-input" placeholder="请输入你的名字" required>
                </div>

                <div class="form-group">
                  <label for="email" class="form-label">电子邮箱</label>
                  <input type="email" id="email" name="email" class="form-input" placeholder="请输入你的邮箱" required>
                </div>

                <div class="form-group">
                  <label for="subject" class="form-label">主题</label>
                  <input type="text" id="subject" name="subject" class="form-input" placeholder="请输入主题">
                </div>

                <div class="form-group">
                  <label for="message" class="form-label">你的留言</label>
                  <textarea id="message" name="message" class="form-textarea" placeholder="请输入你的留言内容..."
                    required></textarea>
                </div>

                <button type="submit" class="submit-btn">发送留言</button>
              </form>
            </div>

            <!-- 联系信息 -->
            <div>
              <h2 class="h2 section-title">联系信息</h2>

              <p class="section-text" style="margin-bottom: 30px;">
                你可以通过以下方式联系我们，我们会尽快回复你的消息～
              </p>

              <!-- 电话联系卡片 -->
              <div class="contact-info-card">
                <div class="contact-icon">
                  <ion-icon name="call-outline"></ion-icon>
                </div>

                <div class="contact-details">
                  <h3 class="contact-title">电话联系</h3>
                  <p class="contact-text">(+86) 15813316885</p>
                  <p class="contact-text">工作日 9:00-18:00</p>
                </div>
              </div>

              <!-- 邮箱联系卡片 -->
              <div class="contact-info-card">
                <div class="contact-icon">
                  <ion-icon name="mail-outline"></ion-icon>
                </div>

                <div class="contact-details">
                  <h3 class="contact-title">电子邮箱</h3>
                  <p class="contact-text">610bookshut@example.com</p>
                  <p class="contact-text">我们会在24小时内回复</p>
                </div>
              </div>

              <!-- 线下位置卡片 -->
              <div class="contact-info-card">
                <div class="contact-icon">
                  <ion-icon name="location-outline"></ion-icon>
                </div>

                <div class="contact-details">
                  <h3 class="contact-title">线下位置</h3>
                  <p class="contact-text">某大学X号宿舍楼610室</p>
                  <p class="contact-text">周一至周日 10:00-22:00</p>
                </div>
              </div>

              <!-- 社交媒体卡片 -->
              <div class="contact-info-card">
                <div class="contact-icon">
                  <ion-icon name="chatbubbles-outline"></ion-icon>
                </div>

                <div class="contact-details">
                  <h3 class="contact-title">社交媒体</h3>
                  <p class="contact-text">QQ群：123456789</p>
                  <p class="contact-text">微信公众号：610书窝</p>
                </div>
              </div>
            </div>

          </div>
        </div>
      </section>

      <!-- 
        - #常见问题部分
      -->
      <section class="section" style="background-color: var(--white-2);">
        <div class="container">
          <h2 class="h2 section-title">常见问题</h2>

          <p class="section-text">
            以下是一些常见问题的解答，如果你有其他疑问，欢迎通过上方的联系方式与我们沟通～
          </p>

          <div style="margin-top: 40px;">
            <!-- FAQ项1 -->
            <div class="faq-item active">
              <div class="faq-question">如何加入610书窝？</div>
              <div class="faq-answer">
                加入610书窝非常简单，你可以通过以下两种方式：1) 线上：填写本页面的联系表单，注明"申请加入"，我们会与你联系；2)
                线下：直接来到我们的线下位置，填写纸质申请表即可。加入成为会员完全免费，但我们欢迎你捐赠闲置的书籍哦～
              </div>
            </div>

            <!-- FAQ项2 -->
            <div class="faq-item">
              <div class="faq-question">书窝的借阅规则是怎样的？</div>
              <div class="faq-answer">
                会员可以同时借阅最多3本书，借阅期为2周，可以续借一次（再延长2周）。借阅时需要登记个人信息，并缴纳少量押金（每本书原价的50%），归还时全额退还。逾期未还会有一定的滞纳金，每天每本书1元。
              </div>
            </div>

            <!-- FAQ项3 -->
            <div class="faq-item">
              <div class="faq-question">如何向书窝捐赠图书？</div>
              <div class="faq-answer">
                我们非常欢迎图书捐赠！你可以直接带着书籍来到线下位置，或者联系我们安排上门取书。我们接受品相良好的各类图书，但不接受有明显污损、霉变的书籍。每捐赠5本书，可获得1个月的VIP会员资格（可同时借阅5本书）。
              </div>
            </div>

            <!-- FAQ项4 -->
            <div class="faq-item">
              <div class="faq-question">书窝会定期举办什么活动？</div>
              <div class="faq-answer">
                我们每月都会举办各种读书活动，包括但不限于：读书分享会、主题书展、作者见面会、读书沙龙等。活动信息会提前在网站、公众号和线下公告栏发布，会员可优先报名参加。
              </div>
            </div>

            <!-- FAQ项5 -->
            <div class="faq-item">
              <div class="faq-question">我可以为书窝推荐购买新书吗？</div>
              <div class="faq-answer">
                当然可以！我们非常欢迎读者推荐好书。你可以通过联系表单提交推荐，或在线下放置的"荐购箱"中留言。如果你推荐的书被采纳，你将成为该书的第一个借阅者，并获得一次免费借阅的机会～
              </div>
            </div>
          </div>
        </div>
      </section>

      <!-- 
        - #订阅部分
      -->
      <section class="section offer has-bg-image" aria-label="newsletter"
        style="background-image: url('./assets/images/section-bg.jpg')">
        <div class="container">

          <p class="section-subtitle">保持联系</p>

          <h2 class="h2 section-title">订阅我们的电子通讯</h2>

          <p class="section-text">
            订阅我们的电子通讯，获取最新的活动信息、新书推荐和会员专享优惠～
          </p>

          <form action="#" method="post" style="max-width: 500px; margin: 30px auto 0;">
            <div style="display: flex; gap: 10px;">
              <input type="email" placeholder="输入你的邮箱地址" required
                style="flex: 1; padding: 12px 15px; border-radius: 8px; border: none;">
              <button type="submit" class="btn btn-primary" style="white-space: nowrap;">立即订阅</button>
            </div>
          </form>

        </div>
      </section>

    </article>
  </main>

  <!-- 
    - #FOOTER
  -->
  <footer class="footer has-bg-image" style="background-image: url('./assets/images/section-bg.jpg')">

    <div class="footer-top section">
      <div class="container grid-list">

        <div class="footer-brand">

          <a href="#" class="logo">
            <img src="./assets/images/logo.svg" width="138" height="28" alt="610书窝 Logo">
          </a>

          <p class="footer-text">
            欢迎来到610书窝！你的专属宿舍阅读角~ 📚✨
          </p>

          <ul class="social-list">
            <li>
              <a href="#" class="social-link" title="QQ">
                <i class="fa-brands fa-qq"></i>
              </a>
            </li>
            <li>
              <a href="#" class="social-link" title="微信">
                <i class="fa-brands fa-weixin"></i>
              </a>
            </li>
            <li>
              <a href="#" class="social-link" title="微博">
                <i class="fa-brands fa-weibo"></i>
              </a>
            </li>
          </ul>

        </div>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">关于书窝</p>
          </li>

          <li>
            <a href="#" class="footer-link">书窝故事</a>
          </li>

          <li>
            <a href="./members.html" class="footer-link">成员介绍</a>
          </li>

          <li>
            <a href="#" class="footer-link">加入我们?</a>
          </li>

          <li>
            <a href="#" class="footer-link">书友Q&A</a>
          </li>

          <li>
            <a href="#" class="footer-link">好书推荐</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">书友指南</p>
          </li>

          <li>
            <a href="#" class="footer-link">借阅规则</a>
          </li>

          <li>
            <a href="#" class="footer-link">图书分类</a>
          </li>

          <li>
            <a href="#" class="footer-link">荐购通道</a>
          </li>

          <li>
            <a href="#" class="footer-link">书单分享</a>
          </li>

          <li>
            <a href="#" class="footer-link">活动日历</a>
          </li>

        </ul>

        <ul class="footer-list">

          <li>
            <p class="footer-list-title">特色活动</p>
          </li>

          <li>
            <a href="#" class="footer-link">读书分享会</a>
          </li>

          <li>
            <a href="#" class="footer-link">主题书展</a>
          </li>

          <li>
            <a href="#" class="footer-link">好物交换</a>
          </li>

          <li>
            <a href="#" class="footer-link">考试周加油站</a>
          </li>

          <li>
            <a href="#" class="footer-link">留言板</a>
          </li>

        </ul>

      </div>
    </div>

    <div class="footer-bottom">
      <div class="container">

        <p class="copyright">
          © 2025 610书窝 | 由舍友们用心维护~ ❤️
        </p>

      </div>
    </div>

  </footer>

  <!-- 
    - #BACK TO TOP
  -->
  <a href="#top" class="back-top-btn" aria-label="返回顶部" data-back-top-btn>
    <ion-icon name="chevron-up" aria-hidden="true"></ion-icon>
  </a>

  <!-- 
    - custom js link
  -->
  <script src="./assets/js/script.js" defer></script>

  <!-- 
    - ionicon link
  -->
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>

  <!-- FAQ展开收起交互脚本 -->
  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const faqQuestions = document.querySelectorAll('.faq-question');

      faqQuestions.forEach(question => {
        question.addEventListener('click', function () {
          const faqItem = this.parentElement;
          faqItem.classList.toggle('active');
        });
      });
    });
  </script>

</body>

</html>